<script lang="ts" setup>
// import { dayjs } from "element-plus";

/**
 * 消息模板（默认文本）
 * ctx-name 用于右键菜单
 */
const { data } = defineProps<{
  data: ChatMessageVO<TextBodyMsgVO | ImgBodyMsgVO | RtcBodyMsgVO | AiChatBodyMsgVO | GroupNoticeBodyMsgVO | AiChatReplyBodyMsgVO>;
  prevMsg?: Partial<ChatMessageVO<TextBodyMsgVO>>
  index: number
}>();
defineEmits(["clickAvatar"]);

const chat = useChatStore();
const user = useUserStore();
// 具体
interface TextBodyVO extends TextBodyMsgVO {
  translation?: Partial<TranslationVO>;
}
const msgId = data.message?.id;
const body = computed(() => data.message?.body as Partial<TextBodyVO> | undefined);
const isSelf = user?.userInfo?.id && data?.fromUser?.userId === user?.userInfo?.id;
// 关闭翻译
function clearTranslation() {
  if (body?.value?.translation) {
    closeTranslation(msgId, body.value.translation.targetLang!);
    body.value.translation = undefined;
  }
}
</script>

<template>
  <div
    v-bind="$attrs"
    class="msg"
    :class="{
      self: isSelf,
    }"
  >
    <!-- 头像 -->
    <CardElImage
      ctx-name="avatar"
      error-class="i-solar:user-bold-duotone"
      :src="BaseUrlImg + data.fromUser.avatar"
      fit="cover"
      class="avatar h-2.4rem w-2.4rem flex-shrink-0 cursor-pointer rounded-1/2 object-cover border-default"
      @click="$emit('clickAvatar', data.fromUser.userId)"
    />
    <!-- 消息体 -->
    <div class="body">
      <div class="flex-res">
        <!-- 昵称 -->
        <small class="nickname flex-1 truncate" ctx-name="nickname">
          {{ data.fromUser.nickName }}
        </small>
        <!-- 插槽 -->
        <slot name="name-after" />
        <!-- <small class="sendTime text-0.7em op-0" ctx-name="sendTime">
          {{ dayjs(data.message.sendTime).format("YYYY-MM-DD HH:mm:ss") }}
        </small> -->
      </div>
      <!-- 内容 -->
      <slot name="body">
        <p class="msg-popper msg-wrap" ctx-name="content">
          {{ data.message.content }}
        </p>
      </slot>
      <!-- 回复 -->
      <small
        v-if="body?.reply"
        title="点击跳转"
        ctx-name="reply"
        class="reply"
        @click="chat.scrollReplyMsg(body?.reply?.id || 0, body?.reply?.gapCount, false)"
      >
        <i class="i-solar:forward-2-bold-duotone mr-1 p-2" />
        {{ `${body.reply.nickName} : ${body.reply?.body?.substring(0, 50) || ''}` }}
      </small>
      <!-- AT @ -->
      <small
        v-if="body?.atUidList?.length && body?.atUidList.includes(user?.userInfo?.id)"
        ctx-name="atUidList"
        class="at-list flex-ml-a"
      >
        有人@我
      </small>
      <!-- 翻译内容 -->
      <div
        v-if="body?.translation"
        key="translation"
        ctx-name="translation"
        class="group translation"
      >
        <div ctx-name="translation" class="mb-2px select-none pb-2px tracking-0.1em border-default-b dark:op-80">
          <i ctx-name="translation" class="i-solar:check-circle-bold mr-1 bg-theme-info p-2.4" />
          {{ body?.translation?.tool?.label || '' }}
          <NuxtLink
            :to="{
              path: TranslationPagePath,
              query: { dis: 1 },
            }"
            ctx-name="translation" class="ml-1 text-theme-info op-80 hover:op-100" title="前往更改"
          >
            {{ translationLangMap.get(body?.translation?.sourceLang) || "自动" }}
            <i ctx-name="translation" class="i-solar:alt-arrow-right-linear mr-1 p-2" />
            {{ translationLangMap.get(body?.translation?.targetLang) || "自动" }}
          </NuxtLink>
          <i ctx-name="translation" class="i-solar:close-circle-bold-duotone float-right p-2.4 btn-danger sm:(op-0 group-hover:op-100)" @click.stop="clearTranslation" />
        </div>
        {{ body?.translation?.result || '' }}
        <svg v-if="body?.translation?.status === 'connecting'" class="inline-block h-1em w-1em animate-spin -mb-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" /><path fill="currentColor" d="M12 4.5a7.5 7.5 0 1 0 0 15a7.5 7.5 0 0 0 0-15M1.5 12C1.5 6.201 6.201 1.5 12 1.5S22.5 6.201 22.5 12S17.799 22.5 12 22.5S1.5 17.799 1.5 12" opacity=".1" /><path fill="currentColor" d="M12 4.5a7.46 7.46 0 0 0-5.187 2.083a1.5 1.5 0 0 1-2.075-2.166A10.46 10.46 0 0 1 12 1.5a1.5 1.5 0 0 1 0 3" /></g></svg>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@use './msg.scss';
</style>
